<template>
  <div class="container">
    <scroll-view scroll-y
                 style="height:100%">
      <div class="page-content">
        <!-- 订单状态 -->
        <div class="status-bar clearfix"
             v-if="order_data.order_status_name&&order_data.order_status_name!=''">
          <div class="inner-bar clearfix">
            <div class="status-name">
              <div class="icon">
                <img :src="base_url+'/mp_3.2.4/status_icon.png'"
                     v-if="base_url"
                     alt
                     class="img" />
              </div>
              <!-- {{status_data[order_data.order_status+'']}} -->
              {{order_data.order_status_name}}
            </div>

            <!-- 只有 已下单 待确认 两个状态显示倒计时 -->
            <div class="status-tip"
                 v-if="(count_down_data.hours>0||count_down_data.minutes>0||count_down_data.seconds>0)&&(order_data.order_status==1||order_data.order_status==2)">倒计时:{{count_down_data.hours}}:{{count_down_data.minutes}}:{{count_down_data.seconds}}</div>
          </div>
        </div>
        <!-- 卡券详情 -->
        <div class="ct-info"
             v-if="order_data.goods_type">
          <card v-if="order_data.goods_type==1"
                :card_info="order_data"></card>
          <ticket-mine v-if="order_data.goods_type==2"
                       :ticket_info="order_data"></ticket-mine>
        </div>
        <!-- 挂售信息 -->
        <div class="owner-info"
             v-if="order_data.user_name&&order_data.user_name!=''">
          <div class="icon">
            <img :src="base_url+'/mp_3.2.4/%E4%BF%A1%E6%81%AF%402x.png'"
                 v-if="base_url"
                 alt
                 class="img" />
          </div>
          <div class="msg">{{order_data.user_name}}用户{{order_data.user_phone_show}}手机号挂售</div>
        </div>
        <!-- 订单信息 -->
        <div class="order-info clearfix"
             v-if="order_data.order_sn&&order_data.order_sn!=''">
          <div class="section">
            <div class="sec-name">订单编号</div>
            <div class="sec-content">
              {{order_data.order_sn}}
              <div class="copy"
                   @tap="copy(order_data.order_sn)">复制</div>
            </div>
          </div>
          <div class="section">
            <div class="sec-name">挂售时间</div>
            <div class="sec-content">{{order_data.order_sale_time}}</div>
          </div>
          <div class="section">
            <div class="sec-name">卡原价</div>
            <div class="sec-content">{{order_data.goods_price}}</div>
          </div>
          <div class="section">
            <div class="sec-name">卡挂售价</div>
            <div class="sec-content">{{order_data.goods_sale_price}}</div>
          </div>
          <div class="section">
            <div class="sec-name">挂售人手机号</div>
            <div class="sec-content">{{order_data.user_phone}}</div>
          </div>
          <div class="section">
            <div class="sec-name">购买人手机号</div>
            <div class="sec-content">{{order_data.sale_user_phone}}</div>
          </div>
        </div>
        <!-- 购买原因 -->
        <div class="reason"
             v-if="isShowReason">
          <div class="reason-content"
               @tap.stop="show_inp()">
            <input v-model="all_reason"
                   type="text"
                   class="textarea-inp"
                   maxlength="300"
                   :focus="is_focus"
                   @blur="blur_inp" />
            <div class="reason-textarea"
                 :class="{'placeholder':all_reason==''}">
              {{all_reason==''?'请说名您实际购买的情况说明及支付截图（限300字）':all_reason}}
            </div>
          </div>
          <!-- 图片上传、展示 -->
          <div class="pic-bar clearfix">
            <div class="pic-item"
                 v-for="(item, index) in img_arr"
                 :key="index">
              <div class="del-btn"
                   v-if="order_data.is_confirm_pay==1"
                   @tap.stop="del_image(item)">
                <img :src="base_url+'/mp_3.2.4/del-btn.png'"
                     v-if="base_url"
                     alt
                     class="img" />
              </div>
              <div class="pic">
                <img :src="img_url+item"
                     v-if="img_url"
                     mode="widthFix"
                     alt
                     class="img" />
              </div>
            </div>
            <!-- 上传图片的按钮 -->
            <div class="uploader"
                 v-if="img_arr.length<3&&order_data.is_confirm_pay==1"
                 @tap="upload_image()">
              <div class="icon">
                <img :src="base_url+'/mp_3.2.4/uploader.png'"
                     v-if="base_url"
                     alt
                     class="img" />
              </div>
              <div class="msg">上传图片</div>
              <div class="tip">{{img_arr.length}}/3</div>
            </div>
          </div>
        </div>
        <!-- 说明 -->
        <div class="notice">
          平台挂售说明:
          <br />1.挂售平台交易通过线下转账进行;
          <br />2.转账成功后若卖家长时间不进行确认，可以保存好相关转账记录，联系客服进行处理
        </div>
      </div>
    </scroll-view>
    <div class="bottom-bar"
         v-if="order_data.is_customer_service==1||order_data.is_collection_pay==1||order_data.is_cancel_button==1||order_data.is_confirm_pay==1">
      <div class="btn white-btn"
           @tap="ct_service()"
           v-if="order_data.is_customer_service==1">联系客服</div>
      <div class="btn pink-btn"
           @tap="comfirm_receive()"
           v-if="order_data.is_collection_pay==1">确认收款(发券)</div>
      <div class="btn white-btn"
           @tap="cancel()"
           v-if="order_data.is_cancel_button==1&&!isShowReason">取消购买</div>
      <div class="btn pink-btn"
           @tap="comfirm_pay()"
           v-if="order_data.is_confirm_pay==1">确认付款</div>
    </div>
  </div>
</template>

<script>
import common from "@/assets/js/mmk_common.js";
import card from "@/components/ct_store/card";
import ticketMine from "@/components/ct_store/ticket_mine";
let order_timer;
export default {
  data () {
    return {
      base_url: common.image_resource,
      img_url: common.image_response,
      order_data: {},
      all_reason: "",
      is_confirm_pay: 0, //
      reason: "",
      isShowReason: false, //是否显示购买原因
      order_id: 0,
      status_data: {
        1: "已下单",
        2: "待确认",
        3: "待收货",
        4: "待评价",
        5: "已完成",
        6: "待退款",
        7: "已退款",
        8: "已取消",
        9: "客服介入",
        10: "待尾款支付",
        11: "尾款待支付",
        12: "订单已超时",
        13: "退款异常"
      },
      img_arr: [],
      count_down_data: {
        day: 0,
        hours: 0,
        minutes: 0,
        seconds: 0
      },
      is_focus: false
    };
  },
  methods: {
    //   获取订单数据
    get_data () {
      let that = this;
      wx.showLoading({
        title: "", //提示的内容,
        mask: true, //显示透明蒙层，防止触摸穿透,
        success: res => { }
      });
      common.fly_post(
        "api/v4_5/market_order/orderDetail",
        {
          order_id: this.order_id
        },
        result => {
          let res = result.data;
          wx.hideLoading();
          if (res.status_code == 0) {
            this.order_data = res.data;
            //  处理图片
            if (this.order_data.buy_images) {
              this.img_arr = this.order_data.buy_images.split(",");
            }
            // 处理购买理由
            if (this.order_data.is_confirm_pay != 1 && this.order_data.order_status != 8) {
              this.isShowReason = true
            }
            //  初始化理由
            this.all_reason = this.order_data.buy_remark || "";
            // 格式化挂售时间
            this.order_data.order_sale_time = new Date(
              this.order_data.order_sale_time * 1000
            ).Format("yyyy-MM-dd hh:mm:ss");
            // 截取挂售人手机号
            if (
              this.order_data.user_phone &&
              this.order_data.user_phone != ""
            ) {
              //  为了避免接口搞一些迷惑行为，先把手机号转成字符串
              let tel_str = String(this.order_data.user_phone);
              //   this.order_data.user_phone_show = tel_str.substr(
              //     tel_str.length - 4
              //   ); 
              this.order_data.user_phone_show = tel_str
            }
            //  初始化倒计时
            if (
              this.order_data.order_status == 1 ||
              this.order_data.order_status == 2
            ) {
              order_timer = setInterval(() => {
                this.calculat_timer(that.order_data.order_expired_time);
              }, 1000);
            }
          } else {
            wx.showToast({
              title: res.message, //提示的内容,
              icon: "none", //图标,
              duration: 1500, //延迟时间,
              mask: true, //显示透明蒙层，防止触摸穿透,
              success: res => { }
            });
          }
        }
      );
    },
    calculat_timer (end_timer) {
      let that = this;
      let now_time = new Date().getTime();
      let end_time = end_timer * 1000 - now_time;
      if (end_time <= 0) {
        clearInterval(order_timer);
        return false;
      }
      //计算出相差天数
      let days = Math.floor(end_time / (24 * 3600 * 1000)) + "";
      //计算出小时数
      let leave1 = end_time % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
      let hours = days * 24 + Math.floor(leave1 / (3600 * 1000)) + "";
      //计算相差分钟数
      let leave2 = leave1 % (3600 * 1000); //计算小时数后剩余的毫秒数
      let minutes = Math.floor(leave2 / (60 * 1000)) + "";
      //计算相差秒数
      let leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数
      let seconds = Math.round(leave3 / 1000) + "";
      this.count_down_data.day = days.padStart(2, "0");
      this.count_down_data.hours = hours.padStart(2, "0");
      this.count_down_data.minutes = minutes.padStart(2, "0");
      this.count_down_data.seconds = seconds.padStart(2, "0");
    },
    // 跳转客服
    ct_service () {
      let that = this;
      wx.showLoading({
        title: "", //提示的内容,
        mask: true, //显示透明蒙层，防止触摸穿透,
        success: res => { }
      });
      common.fly_post(
        "api/v4_5/market_order/contactCustomerService",
        {
          order_id: this.order_id
        },
        result => {
          let res = result.data;
          wx.hideLoading();
          if (res.status_code == 0) {
            common.ct_service(this.order_data.order_id);
          } else {
            wx.showToast({
              title: res.message, //提示的内容,
              icon: "none", //图标,
              duration: 1500, //延迟时间,
              mask: true, //显示透明蒙层，防止触摸穿透,
              success: res => { }
            });
          }
        }
      );
    },
    // 确认收款
    comfirm_receive () {
      let that = this;
      wx.showLoading({
        title: "", //提示的内容,
        mask: true, //显示透明蒙层，防止触摸穿透,
        success: res => { }
      });
      common.fly_post(
        "api/v4_5/market_order/c2cReceiving",
        {
          order_id: this.order_id
        },
        result => {
          let res = result.data;
          wx.hideLoading();
          if (res.status_code == 0) {
            wx.showToast({
              title: "确认收款成功", //提示的内容,
              icon: "success", //图标,
              duration: 1500, //延迟时间,
              mask: true, //显示透明蒙层，防止触摸穿透,
              success: res => {
                setTimeout(() => {
                  that.get_data();
                }, 1500);
              }
            });
          } else {
            wx.showToast({
              title: res.message, //提示的内容,
              icon: "none", //图标,
              duration: 1500, //延迟时间,
              mask: true, //显示透明蒙层，防止触摸穿透,
              success: res => { }
            });
          }
        }
      );
    },
    // 取消购买
    cancel () {
      let that = this;
      wx.showLoading({
        title: "", //提示的内容,
        mask: true, //显示透明蒙层，防止触摸穿透,
        success: res => { }
      });
      common.fly_post(
        "api/v4_5/market_order/orderCancel",
        {
          order_id: this.order_id
        },
        result => {
          let res = result.data;
          wx.hideLoading();
          if (res.status_code == 0) {
            wx.showToast({
              title: "取消订单成功", //提示的内容,
              icon: "success", //图标,
              duration: 1500, //延迟时间,
              mask: true, //显示透明蒙层，防止触摸穿透,
              success: res => {
                setTimeout(() => {
                  that.get_data();
                }, 1500);
              }
            });
          } else {
            wx.showToast({
              title: res.message, //提示的内容,
              icon: "none", //图标,
              duration: 1500, //延迟时间,
              mask: true, //显示透明蒙层，防止触摸穿透,
              success: res => { }
            });
          }
        }
      );
    },
    // 确认付款
    comfirm_pay () {
      let that = this;
      // 买家进入先查看详情（无上传凭证），点击确认付款改变状态（显示上传凭证），再次点击确认付款（验证凭证）
      if (!this.isShowReason) {
        this.isShowReason = true;
        return;
      }
      if (this.all_reason == "" || this.all_reason.trim() == "") {
        wx.showToast({
          title: "请说名您实际购买的情况说明（限300字）", //提示的内容,
          icon: "none", //图标,
          duration: 1500, //延迟时间,
          mask: true, //显示透明蒙层，防止触摸穿透,
          success: res => { }
        });
        return;
      }
      if (this.img_arr.length == 0) {
        wx.showToast({
          title: "请上传支付截图（至少上传一张，最多可上传三张）", //提示的内容,
          icon: "none", //图标,
          duration: 1500, //延迟时间,
          mask: true, //显示透明蒙层，防止触摸穿透,
          success: res => { }
        });
        return;
      }
      wx.showLoading({
        title: "", //提示的内容,
        mask: true, //显示透明蒙层，防止触摸穿透,
        success: res => { }
      });
      common.fly_post(
        "api/v4_5/market_order/c2cPay",
        {
          order_id: this.order_id,
          buy_remark: this.all_reason,
          buy_images: this.img_arr.join(",")
        },
        result => {
          let res = result.data;
          wx.hideLoading();
          if (res.status_code == 0) {
            wx.showToast({
              title: "确认支付成功", //提示的内容,
              icon: "success", //图标,
              duration: 1500, //延迟时间,
              mask: true, //显示透明蒙层，防止触摸穿透,
              success: res => {
                setTimeout(() => {
                  that.get_data();
                }, 1500);
              }
            });
          } else {
            wx.showToast({
              title: res.message, //提示的内容,
              icon: "none", //图标,
              duration: 1500, //延迟时间,
              mask: true, //显示透明蒙层，防止触摸穿透,
              success: res => { }
            });
          }
        }
      );
    },
    // 上传图片
    upload_image () {
      let that = this;
      wx.chooseImage({
        count: 3 - that.img_arr.length,
        sizeType: ["compressed"],
        success (res) {
          wx.showLoading({
            title: "上传中...", //提示的内容,
            mask: true //显示透明蒙层，防止触摸穿透,
          });
          res.tempFilePaths.forEach(item => {
            wx.uploadFile({
              url: common.base_url + "api/v4_5/upload",
              filePath: item,
              name: "file",
              formData: {
                dirPath: "authentication",
                upload_status: true
              },
              header: {},
              success: res => {
                wx.hideLoading();
                let result = JSON.parse(res.data);
                wx.showToast({
                  title: "图片上传成功", //提示的内容,
                  icon: "none", //图标,
                  duration: 2000, //延迟时间,
                  mask: false //显示透明蒙层，防止触摸穿透
                });
                let arr = [...that.img_arr];
                arr.push(result.data.url);
                that.img_arr = arr;
                that.$emit("getmsg", arr);
              },
              fail: () => {
                wx.hideLoading();
                wx.showToast({
                  title: "图片上传失败", //提示的内容,
                  icon: "none", //图标,
                  duration: 2000, //延迟时间,
                  mask: true //显示透明蒙层，防止触摸穿透
                });
              }
            });
          });
        },
        fail () {
          wx.hideLoading();
          wx.showToast({
            title: "图片选取失败", //提示的内容,
            icon: "none", //图标,
            duration: 2000, //延迟时间,
            mask: true //显示透明蒙层，防止触摸穿透
          });
        }
      });
    },
    // 删除图片
    del_image (item) {
      this.img_arr = this.img_arr.filter(val => val != item);
      this.$forceUpdate();
    },
    copy (str = "") {
      wx.setClipboardData({
        data: str,
        success: function (res) { }
      });
    },
    show_inp () {
      if (this.order_data.is_confirm_pay == 1) {
        this.is_focus = true
      }
    },
    blur_inp () {
      this.is_focus = false
    }
  },
  components: {
    card,
    ticketMine
  },
  onLoad (options) {
    let that = this;
    Object.assign(this.$data, this.$options.data());
    if (options.order_id) {
      this.order_id = options.order_id;
      this.get_data();
    }
  },
  onHide () {
    clearInterval(order_timer);
  },
  onUnload () {
    clearInterval(order_timer);
  },
  onShow () {
    wx.setNavigationBarColor({
      frontColor: "#000000", //前景颜色值，包括按钮、标题、状态栏的颜色，仅支持 #ffffff 和 #000000,
      backgroundColor: "#ffffff", //背景颜色值，有效值为十六进制颜色,
      success: res => { }
    });
    wx.setNavigationBarTitle({ title: "订单详情" });
  }
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  background: rgba(243, 244, 246, 1);
  .page-content {
    padding-bottom: 50px;
    .status-bar {
      background: rgba(255, 255, 255, 1);
      border-radius: 0px 0px 10px 10px;
      .inner-bar {
        margin: 12px 20px;
        font-size: 12px;
        font-family: "PingFangSC-Regular", "PingFang SC";
        font-weight: 400;
        color: rgba(249, 112, 77, 1);
        line-height: 17px;
        background-image: url("https://mmkapp.oss-cn-beijing.aliyuncs.com/h5_images/mp_images/mp_3.2.4/order_status.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        .status-name {
          float: left;
          margin-left: 20px;
          .icon {
            width: 14px;
            height: 14px;
            display: inline-block;
            vertical-align: middle;
            margin-right: 4px;
            .img {
              width: 100%;
              height: 100%;
              display: block;
            }
          }
          font-size: 14px;
          font-family: "PingFangSC-Medium", "PingFang SC";
          font-weight: 500;
          color: rgba(249, 112, 77, 1);
          line-height: 28px;
        }
        .status-tip {
          float: right;
          margin-right: 8px;
          font-size: 12px;
          font-family: "PingFangSC-Regular", "PingFang SC";
          font-weight: 400;
          color: rgba(249, 112, 77, 1);
          line-height: 28px;
        }
      }
    }
    .ct-info {
      margin: 12px;
    }
    .owner-info {
      padding-left: 12px;
      .icon {
        width: 12px;
        height: 12px;
        display: inline-block;
        vertical-align: baseline;
        margin-right: 4px;
        .img {
          width: 100%;
          height: 100%;
        }
      }
      .msg {
        font-size: 14px;
        font-family: "PingFangSC-Regular", "PingFang SC";
        font-weight: 400;
        color: rgba(102, 102, 102, 1);
        display: inline-block;
        vertical-align: baseline;
      }
    }
    .order-info {
      background: rgba(255, 255, 255, 1);
      border-radius: 5px;
      margin: 12px 12px 0;
      padding-bottom: 12px;
      .section {
        display: flex;
        padding-left: 10px;
        margin-top: 12px;
        .sec-name {
          width: 108px;
          font-size: 12px;
          font-family: "PingFangSC-Regular", "PingFang SC";
          font-weight: 400;
          color: rgba(153, 153, 153, 1);
        }
        .sec-content {
          flex: 1;
          font-size: 12px;
          font-family: "PingFangSC-Regular", "PingFang SC";
          font-weight: 400;
          color: rgba(51, 51, 51, 1);
          vertical-align: middle;
          .copy {
            width: 28px;
            height: 14px;
            background: rgba(234, 234, 234, 1);
            border-radius: 7px;
            font-size: 10px;
            font-family: "PingFangSC-Regular", "PingFang SC";
            font-weight: 400;
            color: rgba(102, 102, 102, 1);
            line-height: 14px;
            text-align: center;
            display: inline-block;
            vertical-align: middle;
          }
        }
      }
    }
    .reason {
      background: rgba(255, 255, 255, 1);
      border-radius: 5px;
      margin: 12px 12px 0;
      padding: 12px 10px;
      .reason-content {
        position: relative;
        width: 100%;
        .reason-textarea {
          width: 100%;
          min-height: 20px;
          height: auto;
          font-size: 12px;
          font-family: "PingFangSC-Regular", "PingFang SC";
          font-weight: 400;
          color: rgba(51, 51, 51, 1);
          overflow: auto;
          box-sizing: border-box;
          display: block;
          white-space: normal;
          word-break: break-all;
        }
        .textarea-inp {
          width: 0;
          height: 0;
          opacity: 0;
          position: absolute;
          top: 0;
          left: 0;
        }
        .placeholder {
          font-size: 12px;
          font-family: "PingFangSC-Regular", "PingFang SC";
          font-weight: 400;
          color: rgba(153, 153, 153, 1);
          word-break: break-all;
          width: 100%;
        }
      }
      .pic-bar {
        display: flex;
        margin-top: 14px;
        justify-content: flex-start;
        .pic-item {
          width: 88px;
          height: 88px;
          background: rgba(178, 178, 178, 1);
          border-radius: 5px;
          margin-right: 16px;
          position: relative;
          .pic {
            width: 100%;
            height: 100%;
            overflow: hidden;
            .img {
              width: 100%;
              min-height: 100%;
            }
          }
          .del-btn {
            width: 14px;
            height: 14px;
            position: absolute;
            top: 0;
            right: 0;
            transform: translate(50%, -50%);
            z-index: 10;
            .img {
              width: 100%;
              height: 100%;
              display: block;
            }
          }
        }
        .uploader {
          width: 88px;
          height: 88px;
          background: rgba(250, 251, 252, 1);
          border-radius: 5px;
          border: 1px dashed rgba(217, 217, 217, 1);
          float: left;
          box-sizing: border-box;
          .icon {
            width: 34px;
            height: 27px;
            margin: 16px auto 0;
            .img {
              width: 100%;
              height: 100%;
              display: block;
            }
          }
          .msg {
            font-size: 10px;
            font-family: "PingFangSC-Regular", "PingFang SC";
            font-weight: 400;
            color: rgba(102, 102, 102, 1);
            line-height: 14px;
            margin-top: 5px;
            text-align: center;
          }
          .tip {
            font-size: 10px;
            font-family: "PingFangSC-Regular", "PingFang SC";
            font-weight: 400;
            color: rgba(153, 153, 153, 1);
            line-height: 14px;
            margin-top: 5px;
            text-align: center;
          }
        }
      }
    }
    .notice {
      font-size: 12px;
      font-family: "PingFangSC-Regular", "PingFang SC";
      font-weight: 400;
      color: rgba(102, 102, 102, 1);
      line-height: 21px;
      margin: 10px 12px 0;
      letter-spacing: 1px;
    }
  }
  .bottom-bar {
    height: 48px;
    width: 100%;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px -2px 5px 0px rgba(229, 229, 229, 0.48);
    position: fixed;
    bottom: 0;
    left: 0;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-end;
    padding: 0 10px;
    box-sizing: border-box;
    .btn {
      padding: 0 25px;
      height: 38px;
      border-radius: 100px;
      font-size: 14px;
      font-family: "PingFangSC-Medium", "PingFang SC";
      font-weight: 500;
      line-height: 38px;
      margin-top: 5px;
      margin-left: 16px;
      box-sizing: border-box;
      &.white-btn {
        border: 1px solid rgba(204, 204, 204, 1);
        color: rgba(153, 153, 153, 1);
        background: rgba(255, 255, 255, 1);
      }
      &.pink-btn {
        background: linear-gradient(
          226deg,
          rgba(254, 120, 161, 1) 0%,
          rgba(254, 123, 136, 1) 100%
        );
        color: rgba(255, 255, 255, 1);
      }
    }
  }
}
</style>

